<template>
  <ContentWrap title="用户文件目录">
    <div class="app-container">
      <Search
        ref="search"
        :schema="schema"
        :model="queryParam"
        :is-col="false"
        layout="inline"
        :showSearch="true"
        button-position="left"
        :search-loading="loading"
        :reset-loading="loading"
        @search="handleSearch"
        @reset="handleSearch"
      >
        <template #opts>
          <el-button type="success" @click="add">新增用户文件目录</el-button>
        </template>
      </Search>
    </div>
    <Table :data="dirList" :columns="columns" :pagination="paging" @change="load">
      <template #UpLimit="e">
        <p>文件大小限制：{{ formatFileSize(e.row.AllowUpFileSize) }}。</p>
        <p>允许上传的文件：{{ e.row.AllowExtension.join(',') }}。</p>
      </template>
      <template #DirStatus="e">
        {{ DirStatus[e.row.DirStatus].text }}
      </template>
      <template #FileSize="e">
        {{ formatFileSize(e.row.FileSize) }}
      </template>
      <template #UpPower="e">
        <p>是否需要登陆：{{ e.row.IsAccredit ? '是' : '否' }}。</p>
        <p v-if="e.row.IsAccredit"
          >需要的权限码：{{
            e.row.UpPower && e.row.UpPower.length !== 0 ? e.row.UpPower.join(',') : '无'
          }}。</p
        >
      </template>
      <template #ReadPower="e">
        <p>访问权限类型：{{ FilePower[e.row.Power].text }}。</p>
        <p v-if="e.row.ReadPower">需要的权限码：{{ e.row.ReadPower.join(',') }}。</p>
      </template>
      <template #UpImgSet="e">
        <template v-if="e.row.UpImgSet">
          <p v-if="e.row.UpImgSet.Ratio"
            >高宽比：{{ e.row.UpImgSet.Ratio[0] + ':' + e.row.UpImgSet.Ratio[1] }}。</p
          >
          <p v-if="e.row.UpImgSet.MinWidth || e.row.UpImgSet.MaxWidth"
            >宽度范围：{{ e.row.UpImgSet.MinWidth }} - {{ e.row.UpImgSet.MaxWidth }}。</p
          >
          <p v-if="e.row.UpImgSet.MinHeight || e.row.UpImgSet.MaxHeight"
            >高度范围：{{ e.row.UpImgSet.MinHeight }} - {{ e.row.UpImgSet.MaxHeight }}。</p
          >
        </template>
      </template>
      <template #action="e">
        <BaseButton
          size="small"
          type="primary"
          title="编辑"
          :icon="editIcon"
          circle
          @click="edit(e.row.Id)"
        />
        <BaseButton
          v-if="e.row.FileNum == 0"
          size="small"
          type="danger"
          title="删除"
          :icon="dropIcon"
          circle
          @click="drop(e.row)"
        />
      </template>
    </Table>
    <editUserFileDir :id="id" v-model:visible="visible" @close="closeEdit" />
  </ContentWrap>
</template>

<script>
import * as dirApi from '@/api/file/userFileDir'
import { FileEnumDic, DirStatus, FilePower } from '@/config/fileConfig'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useIcon } from '@/hooks/web/useIcon'
import editUserFileDir from './components/editUserFileDir.vue'
export default {
  components: {
    Table,
    Search,
    editUserFileDir
  },
  data() {
    return {
      DirStatus,
      FileEnumDic,
      FilePower,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      loading: false,
      dirList: [],
      id: null,
      visible: false,
      queryParam: {
        QueryKey: null,
        Power: null,
        DirStatus: null
      },
      schema: [
        {
          field: 'QueryKey',
          label: '关键字',
          component: 'Input',
          componentProps: {
            placeholder: '目录名/目录Key'
          }
        },
        {
          field: 'DirStatus',
          label: '目录状态',
          component: 'EnumItem',
          componentProps: {
            sysHead: 'file',
            dicKey: FileEnumDic.dirStatus,
            placeholder: '目录状态',
            multiple: false
          }
        },
        {
          field: 'Power',
          label: '访问权限类型',
          component: 'EnumItem',
          componentProps: {
            sysHead: 'file',
            dicKey: FileEnumDic.filePower,
            placeholder: '访问权限类型'
          }
        }
      ],
      columns: [
        {
          sortby: 'DirKey',
          field: 'DirKey',
          label: '目录Key',
          align: 'center',
          width: 150,
          sortable: 'custom'
        },
        {
          sortby: 'DirName',
          field: 'DirName',
          label: '目录名',
          align: 'left',
          minWidth: 150,
          sortable: 'custom'
        },
        {
          sortby: 'DirStatus',
          field: 'DirStatus',
          label: '目录状态',
          align: 'center',
          slotName: 'DirStatus',
          width: 120,
          sortable: 'custom'
        },
        {
          field: 'UpLimit',
          label: '上传限制',
          align: 'left',
          slotName: 'UpLimit',
          minWidth: 100
        },
        {
          field: 'UpPower',
          label: '上传权限',
          align: 'left',
          slotName: 'UpPower',
          minWidth: 100
        },
        {
          field: 'ReadPower',
          label: '访问权限',
          align: 'left',
          slotName: 'ReadPower',
          minWidth: 100
        },
        {
          field: 'FileNum',
          label: '文件引用数',
          align: 'right',
          width: 120
        },
        {
          field: 'UpImgSet',
          label: '图片配置',
          align: 'center',
          width: 200,
          slotName: 'UpImgSet'
        },
        {
          field: 'UpShow',
          label: '上传说明',
          align: 'left',
          minWidth: 120
        },
        {
          field: 'action',
          label: '操作',
          align: 'left',
          minWidth: 100,
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 20,
        total: 0,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    handleSearch(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.DirStatus = data.DirStatus
      this.queryParam.Power = data.Power
      this.load()
    },
    closeEdit(isRefresh) {
      if (isRefresh) {
        this.load()
      }
    },
    edit(id) {
      this.id = id
      this.visible = true
    },
    drop(row) {
      const title = '确认删除用户文件目录：' + row.DirName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await dirApi.deleteDir(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.load()
    },
    add() {
      this.id = null
      this.visible = true
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Power = null
      this.queryParam.DirStatus = null
      this.load()
    },
    formatFileSize(size) {
      if (size == null) {
        return '无限制'
      }
      size = parseInt(size)
      let t = 1024 * 1024 * 1024
      let num = Math.floor(size / t)
      let str = ''
      if (num !== 0) {
        str = num + 'GB '
        size = size % t
      }
      t = 1024 * 1024
      num = Math.floor(size / t)
      if (num !== 0) {
        str = str + num + 'MB '
        size = size % t
      }
      t = 1024
      num = Math.floor(size / t)
      if (num !== 0) {
        str = str + num + 'KB '
        size = size % t
      }
      if (size !== 0) {
        str = str + size + 'B'
      }
      return str
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await dirApi.Query(this.queryParam, curPaging)
      this.dirList = res.List
      this.paging.total = res.Count
    }
  }
}
</script>
<style scoped>
p {
  margin: 0;
}
</style>
